<template>

  <div class="echarts">
    <div id="ChartTwo" :style="{ height: '100%'}"></div>
  </div>
  
</template>

<script>
  // 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  
  methods: {
    drawLine() {
      let mainChart = echarts.init(document.getElementById('ChartTwo'));
      window.addEventListener('resize', mainChart.resize);
      // 绘制图表
      mainChart.setOption({
           title: {
          text: 'ECharts Hello World'
        },
        tooltip: {},
        xAxis: {
          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks'],
          axisLabel:{
            interval:0,
          }
        },
        yAxis: {},
        series: [{
          name: 'Sales',
          type: 'bar',
          barWidth: 20,
          data: [36, 20, 5, 10, 40, 20]
        }]
      });
    }
    
  }
}
    
</script>
<style scoped>
  .echarts {
    padding-left: 20px;
    padding-top: 20px;
    width: 50%;
    height: 50%;
    float: left;
  }
  
</style>
 